<template>
	<view class="content" :style="'background: linear-gradient('+theme.ba_color+', #fff 8%);'">
		<view class="wid90 mar dis disAl" style="height: 100rpx;">
			<picker :value="cityIndex" @change="bindCityChange" :range-key="'title'" :range="addressList">
				<view class="dis disAl">
					<uni-icons type="location-filled" size="40rpx" :color="theme.main_color"></uni-icons>
					<view class="mar-left10 foSi25 overflowHidden mar-left10">{{city?city.title:cityName}}</view>
					<image src="../../static/xiala.png" class="mar-left20" style="width: 13rpx;height: 8rpx;"></image>
				</view>
			</picker>

		</view>
		<view class="borRad30 wid100 hei poRel" style="overflow: hidden;">
			<!-- <map id="map" class="wid100 hei" :scale="scale" :latitude="latitude" :longitude="longitude" :markers="covers"
				@markertap="markTap">
				<cover-view v-if="jishi" class="wid100 poAbs" style="bottom: 20rpx;">
					<cover-view class="wid90 mar dis disAl disJuB bacFFF borRad20 poRel"
						style="height: 266rpx;overflow: hidden;">
						<cover-view style="width: 75%;">
							<cover-view style="height: 30rpx;"></cover-view>
							<cover-view class="wid90 mar">
								<cover-view class="dis disAl">
									<cover-view style="height: 140rpx;width: 35%;">
										<cover-image :src="tech.coverimg" class="hei100"
											style="width: 140rpx;"></cover-image>
									</cover-view>
									<cover-view style="width: 65%;">
										<cover-view class="dis disAl">
											<cover-view class="foSi30 fowe600">{{tech.name}}</cover-view>
											<cover-view class="mar-left20 butt1 coFFF foSi18 dis disAl"
												:style="'background-color: '+theme.main_color+';'">
												<cover-view style="width: 10rpx;"></cover-view>
												<cover-view>更多照片</cover-view>
												<cover-view style="width: 10rpx;"></cover-view>
											</cover-view>
										</cover-view>
										<cover-view class="mar-top20 dis">
											<cover-view class=" butt2 foSi15 dis disAl"
												:style="'background-color: '+theme.ba_color+';color: '+theme.main_color+';'">
												<cover-view style="width: 14rpx;"></cover-view>
												<cover-view>最早可约：{{tech.zztime}}</cover-view>
												<cover-view style="width: 14rpx;"></cover-view>
											</cover-view>
										</cover-view>
										<cover-view class="dis disAl mar-top20">
											<cover-view class="dis disAl">
												<cover-image src="../../static/pingjia.png"
													style="width: 25rpx;height: 24rpx;"></cover-image>
												<cover-view class="foSi25"
													style="color: #FEC44A;margin-left: 6rpx;">{{tech.star}}</cover-view>
											</cover-view>
											<cover-view class="mar-left20"
												style="width: 1rpx;height: 22rpx;background-color: #BFBFBF;"></cover-view>
											<cover-view class="dis disAl mar-left20">
												<cover-image src="../../static/dingdan.png"
													style="width: 20rpx;height: 24rpx;"></cover-image>
												<cover-view class="foSi25" :style="'color: '+theme.main_color+';'"
													style="margin-left: 6rpx;">{{tech.service_order_num}}</cover-view>
											</cover-view>
											<cover-view class="mar-left20"
												style="width: 1rpx;height: 22rpx;background-color: #BFBFBF;"></cover-view>
											<cover-view class="dis disAl mar-left20">
												<cover-image src="../../static/jiuli.png"
													style="width: 22rpx;height: 22rpx;"></cover-image>
												<cover-view class="foSi25"
													style="color: #ED9669;margin-left: 6rpx;">{{tech.km}}</cover-view>
											</cover-view>
										</cover-view>
									</cover-view>
								</cover-view>
								<cover-view class="mar-top20 foSi18 borRad10 overflowHidden"
									style="background-color: #EEEEEE;padding: 20rpx 18rpx;">{{tech.brief}}</cover-view>
								<cover-view class="hei20"></cover-view>
							</cover-view>
						</cover-view>
						<cover-view class="wid25 hei100 foSi30 coFFF dis disAl disJuC"
							@click.stop="tiaozhuan('/pages/technician/particulars?id='+tech.id)"
							:style="'background-color: '+theme.main_color+';'">
							<cover-view>立即预约</cover-view>
						</cover-view>
						<cover-image src="../../static/guanbi.png" class="poAbs" @click="guanbi"
							style="top: 0;right: 0;width: 68rpx;height: 68rpx;"></cover-image>
					</cover-view>
				</cover-view>
			</map> -->
			<finderMap ref="finderMapRefs" @onLoadTianDiTu="initMaps" @onSelect="selectPoint" :apiKey="apiKey">
			</finderMap>
			<view v-if="jishi" class="wid100 poAbs" style="bottom: 20rpx;z-index: 999;">
				<view class="wid90 mar dis disAl disJuB bacFFF borRad20 poRel" style="height: 266rpx;overflow: hidden;">
					<view style="width: 75%;">
						<view style="height: 30rpx;"></view>
						<view class="wid90 mar">
							<view class="dis disAl">
								<view style="height: 140rpx;width: 35%;">
									<image :src="tech.coverimg" class="hei100" style="width: 140rpx;"></image>
								</view>
								<view style="width: 65%;">
									<view class="dis disAl">
										<view class="foSi30 fowe600">{{tech.name}}</view>
										<view class="mar-left20 butt1 coFFF foSi18 dis disAl"
											:style="'background-color: '+theme.main_color+';'">
											<view style="width: 10rpx;"></view>
											<view>更多照片</view>
											<view style="width: 10rpx;"></view>
										</view>
									</view>
									<view class="mar-top20 dis">
										<view class=" butt2 foSi15 dis disAl"
											:style="'background-color: '+theme.ba_color+';color: '+theme.main_color+';'">
											<view style="width: 14rpx;"></view>
											<view>最早可约：{{tech.zztime}}</view>
											<view style="width: 14rpx;"></view>
										</view>
									</view>
									<view class="dis disAl mar-top20">
										<view class="dis disAl">
											<image src="../../static/pingjia.png" style="width: 25rpx;height: 24rpx;">
											</image>
											<view class="foSi25" style="color: #FEC44A;margin-left: 6rpx;">{{tech.star}}
											</view>
										</view>
										<view class="mar-left20"
											style="width: 1rpx;height: 22rpx;background-color: #BFBFBF;"></view>
										<view class="dis disAl mar-left20">
											<image src="../../static/dingdan.png" style="width: 20rpx;height: 24rpx;">
											</image>
											<view class="foSi25" :style="'color: '+theme.main_color+';'"
												style="margin-left: 6rpx;">{{tech.service_order_num}}</view>
										</view>
										<view class="mar-left20"
											style="width: 1rpx;height: 22rpx;background-color: #BFBFBF;"></view>
										<view class="dis disAl mar-left20">
											<image src="../../static/jiuli.png" style="width: 22rpx;height: 22rpx;">
											</image>
											<view class="foSi25" style="color: #ED9669;margin-left: 6rpx;">{{tech.km}}
											</view>
										</view>
									</view>
								</view>
							</view>
							<view class="mar-top20 foSi18 borRad10 overflowHidden"
								style="background-color: #EEEEEE;padding: 20rpx 18rpx;">{{tech.brief}}</view>
							<view class="hei20"></view>
						</view>
					</view>
					<view class="wid25 hei100 foSi30 coFFF dis disAl disJuC"
						@click.stop="tiaozhuan('/pages/technician/particulars?id='+tech.id)"
						:style="'background-color: '+theme.main_color+';'">
						<view>立即预约</view>
					</view>
					<image src="../../static/guanbi.png" class="poAbs" @click="guanbi"
						style="top: 0;right: 0;width: 68rpx;height: 68rpx;"></image>
				</view>
			</view>
		</view>
		<view class="wid100" style="position: absolute;top: -999999px;overflow: hidden;">
			<view v-for="(item,index) in li" :key="index">
				<canvas style="width: 1000px;height: 1000px;" :canvas-id="'firstCanvas'+index"></canvas>
			</view>
		</view>
	</view>
</template>

<script>
	import finderMap from "../../uni_modules/zhuo-tianditu-select/components/zhuo-tianditu-select/finder-map.vue"
	export default {
		components: {
			finderMap
		},
		data() {
			return {
				jishi: false,
				list: null,
				url: this.global.url,
				latitude: 43.86414,
				longitude: 125.35043,
				scale: 13, //缩放级别
				covers: [],
				theme: null,
				addressList: [],
				cityIndex: 0,
				// 当前选择的城市
				city: null,
				tech: null,
				li: 0,
				apiKey: this.global.apiKey,
				pAddress: false
			}
		},
		async onLoad() {
			var that = this;
			that.addressList = uni.getStorageSync('address');
			that.latitude = uni.getStorageSync('lat') ? uni.getStorageSync('lat') : 43.86414
			that.longitude = uni.getStorageSync('lon') ? uni.getStorageSync('lon') : 125.35043
			that.cityName = uni.getStorageSync('cityName');
			that.theme = uni.getStorageSync('theme');
			uni.setNavigationBarColor({
				frontColor: '#000000',
				backgroundColor: that.theme.ba_color, //底部背景色
			})
			console.log(that.latitude, that.longitude)
			that.nearest_city()
		},
		onShow() {},
		methods: {
			initMaps() {
				this.$emit('onLoad')
				console.warn('--------天地图加载完成--------');
			},
			selectPoint(e) {
				console.log(e)
				var that = this;
				uni.request({
					url: that.global.url + 'api/qianyu_smfw/technician/infos',
					method: "POST",
					header: {
						'site-id': that.global.site_id, //自定义请求头信息
						'token': uni.getStorageSync('token')
					},
					data: {
						id: e,
						lon: uni.getStorageSync('lon') ? uni.getStorageSync('lon') : 125.35043,
						lat: uni.getStorageSync('lat') ? uni.getStorageSync('lat') : 43.86414
					},
					success(res) {
						let result = res.data
						console.log(result.data)
						if (result.code == 1) {
							that.tech = result.data
							that.jishi = true
						} else {
							uni.showToast({
								title: result.msg,
								//将值设置为 success 或者直接不用写icon这个参数
								icon: 'error',
								//显示持续时间为 2秒
								duration: 2000
							})
						}
					}
				})
			},
			async nearest_city() {
				var that = this;
				uni.request({
					url: that.global.url + 'api/qianyu_smfw/common/nearest_city',
					method: "POST",
					header: {
						'site-id': that.global.site_id, //自定义请求头信息
						'token': uni.getStorageSync('token')
					},
					data: {
						city_name: that.cityName,
						lng: that.longitude,
						lat: that.latitude,
					},
					success(res) {
						let result = res.data
						if (result.code == 1) {
							that.city = result.data.city
							if (result.data.code != 1) {
								that.pAddress = true
								that.latitude = that.city.lat
								that.longitude = that.city.lng
							}
							that.getList(1)
						} else {
							uni.showToast({
								title: result.msg,
								//将值设置为 success 或者直接不用写icon这个参数
								icon: 'error',
								//显示持续时间为 2秒
								duration: 2000
							})
						}
					}
				})
			},
			getImageInfo(imgSrc) {
				return new Promise((resolve, reject) => {
					uni.getImageInfo({
						src: imgSrc,
						success: (image) => {
							resolve(image.path);
						},
						fail: (err) => {
							resolve('/static/tu3.png');
						}
					});
				});
			},
			//照片改变大小
			getWatermark(url, i, id) {
				var that = this
				return new Promise((resolve, reject) => {
					uni.getImageInfo({
						src: url,
						success: (ress) => {
							var k = 0
							if (id == 748) {
								console.log(ress)
							}
							var width, height = 0
							//先获取你的canvas
							let ctx = uni.createCanvasContext('firstCanvas' + i, this);
							ctx.save();
							ctx.beginPath(); //开始绘制
							//先画个圆   x,y是圆心的(x,y） 坐标 r是圆的半径 第四个参数是起始角，以弧度计。（弧的圆形的三点钟位置是 0 度）  
							//第五个参数是结束角，以弧度计  最后是绘图方向  默认是false，即顺时针
							if (ress.width < ress.height) {
								k = 1
								if (ress.width > 1000) {
									width,
									height = 200
								}
								else if (ress.width > 900) {
									width,
									height = 240
								}
								else if (ress.width > 800) {
									width,
									height = 280
								}
								else if (ress.width <= 600) {
									width,
									height = 400
								}
								else {
									width,
									height = 320
								}
								ctx.arc(ress.width / 2, ress.width / 2, ress.width / 3, 0, Math.PI * 2,
									false);
							} else {
								if (ress.height > 1000) {
									width,
									height = 200
								}
								else if (ress.height > 900) {
									width,
									height = 240
								}
								else if (ress.height > 800) {
									width,
									height = 280
								}
								else if (ress.height <= 600) {
									width,
									height = 400
								}
								else {
									width,
									height = 320
								}
								ctx.arc(ress.height / 2, ress.height / 2, ress.height / 2, 0, Math.PI *
									2, false);
							}
							if (ress.width == ress.height) {
								if (ress.width > 1000) {
									width,
									height = 150
								}
								else if (ress.width > 900) {
									width,
									height = 180
								}
								else if (ress.width > 800) {
									width,
									height = 230
								}
								else {
									width,
									height = 260
								}
							}
							ctx
						.clip(); //画好了圆 开始剪切  原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内 这也是我们要save上下文的原因
							ctx.drawImage(url, 0, 0);
							ctx.draw(true, (ret) => { // draw方法 把以上内容画到 canvas 中。
								uni.canvasToTempFilePath({ // 保存canvas为图片
									canvasId: 'firstCanvas' + i,
									destWidth: width,
									destHeight: height,
									quality: 1,
									complete: res => {
										if (id == 748) {
											console.log(res.tempFilePath)
										}
										resolve(res.tempFilePath)
									},
								})
							});
							ctx.restore(); //恢复之前保存的绘图上下文 恢复之前保存的绘图上下午即状态 还可以继续绘制
						},
						fail(err) {
							resolve('');
							console.log('失败', err)
						}
					})
				})
			},
			async getOutInfo() {
				var that = this
				return new Promise((resolve, reject) => {
					uni.request({
						url: that.global.url + 'api/qianyu_smfw/technician/map_lists',
						method: "POST",
						header: {
							'site-id': that.global.site_id, //自定义请求头信息
							'token': uni.getStorageSync('token')
						},
						data: {
							city: that.city.id,
							lon: that.longitude,
							lat: that.latitude,
						},
						success(res) {
							resolve(res.data); // 千万别忘写！！！
						}
					})
				})
			},
			async getList(pd) {
				var that = this;
				uni.showLoading({
					title: '加载中...'
				})
				var result = await that.getOutInfo()
				if (result.code == 1) {
					// // #ifdef H5
					// that.covers = result.data
					// // #endif

					// // #ifndef H5
					// var arr = result.data
					// that.li = arr.length
					// for (var i=0; i< arr.length; i++) {
					// 	arr[i].iconPath = await that.getWatermark(arr[i].iconPath,i,arr[i].id)
					// }
					// console.log('后',arr)
					// that.covers = arr
					// // #endif
					var pand = (pd == 1?true:false)
					that.$nextTick(() => {
						that.$refs.finderMapRefs.initCharts(that.longitude, that.latitude, result.data, pand)
					})
					uni.hideLoading()
					if(that.pAddress){
						uni.showToast({
							title: '已切换最近城市',
							//将值设置为 success 或者直接不用写icon这个参数
							icon: 'none',
							//显示持续时间为 2秒
							duration: 2000
						})
					}
				} else {
					uni.showToast({
						title: result.msg,
						//将值设置为 success 或者直接不用写icon这个参数
						icon: 'error',
						//显示持续时间为 2秒
						duration: 2000
					})
				}
			},
			bindCityChange: function(e) {
				this.cityIndex = e.detail.value
				this.city = this.addressList[this.cityIndex]
				this.latitude = this.city.lat
				this.longitude = this.city.lng
				this.getList()
				console.log(this.latitude, this.longitude)
			},
			guanbi() {
				this.jishi = false
			},
			// 点击自定义气泡
			markTap(e) {
				console.log(e);
				var that = this;
				uni.request({
					url: that.global.url + 'api/qianyu_smfw/technician/infos',
					method: "POST",
					header: {
						'site-id': that.global.site_id, //自定义请求头信息
						'token': uni.getStorageSync('token')
					},
					data: {
						id: e.detail.markerId,
						lon: uni.getStorageSync('lon') ? uni.getStorageSync('lon') : 125.35043,
						lat: uni.getStorageSync('lat') ? uni.getStorageSync('lat') : 43.86414
					},
					success(res) {
						let result = res.data
						console.log(result.data)
						if (result.code == 1) {
							that.tech = result.data
							that.jishi = true
						} else {
							uni.showToast({
								title: result.msg,
								//将值设置为 success 或者直接不用写icon这个参数
								icon: 'error',
								//显示持续时间为 2秒
								duration: 2000
							})
						}
					}
				})
			},
			tiaozhuan(url) {
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style>
	.content {
		min-height: 100vh;
	}

	.hei {
		height: calc(100vh - 100rpx);
	}

	.butt1 {
		height: 30rpx;
		border-radius: 10rpx;
	}

	.butt2 {
		height: 24rpx;
		border-radius: 10rpx;
	}
</style>